<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-cell-group>
        <van-row type="flex" justify="space-around">
          <van-col span="11" v-for="item in goodsList" :key="item.id" @click="changeUrl(item.id)" v-lazy="item">
            <van-image :src="item.img_url" />
            <p class="goods">{{item.title}}</p>
            <div class="bottom_box">
              <div class="bottom_box_one">
                <span>￥{{item.market_price}}</span>
                <s>￥{{item.market_price}}</s>
              </div>
              <div class="bottom_box_two">
                <span>热卖中</span>
                <span>剩{{item.stock_quantity}}件</span>
              </div>
            </div>
          </van-col>
        </van-row>
      </van-cell-group>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      // 是否在加载中
      isLoading: false,
      goodsList: []
    }
  },
  created () {
    this.getGoodsList()
  },
  methods: {
    async getGoodsList () {
      const { data: res } = await this.$http.get('/api/getgoods?pageindex=1')
      this.goodsList = res.message
      console.log(this.goodsList)
    },
    changeUrl (id) {
      // console.log()
      this.$router.push('/api/goods/getdesc/' + id)
    },
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
      }, 500)
    }
  }
}
</script>

<style lang="less" scoped>
.goods {
  margin-top: 10px;
  height: 50px;
  font-size: 13px;
  text-align: center;
}
.van-row {
  flex-wrap: wrap;
}
.bottom_box {
  background-color: #b8b8be67;
}
.bottom_box_one {
  span {
    font-size: 16px;
    color: red;
    margin-right: 15px;
  }
  s {
    font-size: 14px;
    line-height: 24px;
  }
}

.bottom_box_two {
  span:nth-child(1) {
    font-size: 14px;
    line-height: 24px;
  }

  span:nth-child(2) {
    margin-left: 5px;
    font-size: 14px;
    line-height: 24px;
  }
}
.van-col {
  border: 2px solid #b8b8be67;
  margin-top: 10px;
}
.van-image {
  margin: 6%;
}
</style>
